<template>
  <div class="LoginPanel">
    <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
      <h3 class="loginTitle">登录</h3>
      <el-form-item prop="username">
        <el-input
          size="large"
          type="text"
          v-model="loginForm.username"
          autocomplete="off"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="large"
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          size="large"
          type="text"
          v-model="loginForm.code"
          auto-complete="false"
          placeholder="点击图片更换验证码"
          style="width: 250px; margin-right: 5px"
        ></el-input>
        <img :src="captchaUrl" @click="updateCaptcha" />
      </el-form-item>
      <!--<el-checkbox class="loginRemember" v-model="checked">记住我</el-checkbox>-->
      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, unref } from "vue";
import type { ElForm } from "element-plus";
import { resetForm, submitForm } from "../utils";
import { LoginIn } from "../api/login";
const loginFormRef = ref<InstanceType<typeof ElForm>>();
const loginForm = reactive({
  username: "admin" as string,
  password: "123" as string,
  code: "" as string,
});
//验证码的值
const captchaUrl = ref<string>("/captcha?time=" + new Date());

// 是否登录成功
const successMode = ref<boolean>(false);

interface usernameface {
  required: boolean;
  message: string;
  trigger: string;
}

interface passwordface {
  required: boolean;
  message: string;
  trigger: string;
}

interface codeface {
  required: boolean;
  message: string;
  trigger: string;
}

//表单校验值
const rules = reactive<{
  username: usernameface[];
  password: passwordface[];
  code: codeface[];
}>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});
//更新验证码的方法
const updateCaptcha = (): void => {
  //验证码
  captchaUrl: "/captcha?time=" + new Date();
  //console.log(captchaUrl.value);
};

const submitLogin = async () => {
  const form = unref(loginFormRef) as any;
  console.log(form);

  if (!form) return;

  try {
    await form.validate();
    successMode.value = true;
  } catch (error) {
    console.log(error);
  }

  if (successMode.value) {
  }
};
</script>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "LoginPanel",
  components: {},
  data() {
    return {};
  },
});
</script>

<style>
.login-code > div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.login-code > div > img {
  width: 100px;
  margin-left: 4px;
  border-radius: 4px;
  background-color: var(--el-border-color-base);
  height: fit-content;
}
.loginTitle {
  text-align: center;
}
.login-panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  height: 80vh;
  align-items: center;
}
.login-form {
  display: flex;
  flex-direction: column;
  width: 240px;
  height: fit-content;
  padding: 10px 10px 20px 20px;
  border-radius: 8px;
  border: 1px solid #f5f5f5;
  box-shadow: 0 15px 52px -9px #35747247;
}
</style>
